<template>
  <div id="lottery">
    <ul>
      <li :class="[`lottery-unit-${i}`, {'active': lottery.index === i}]" v-for="(item, i) in prizeList" :key="i"><img :src="item"></li>
      <li class="btn" @click="luckdraw"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data () {
    return {
      lottery: {
        index: -1, // 当前转动到哪个位置，起点位置
        count: 12, // 总共有多少个位置
        timer: 0, // setTimeout的ID，用clearTimeout清除
        speed: 20, // 初始转动速度
        times: 0, // 转动次数
        cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
        prize: -1 // 中奖位置
      },
      prizeList: ['../static/images/1.png', '../static/images/2.png', '../static/images/4.png', '../static/images/3.png', '../static/images/5.png', '../static/images/6.png', '../static/images/7.png', '../static/images/8.png', '../static/images/6.png', '../static/images/3.png', '../static/images/1.png', '../static/images/7.png'],
      click: false
    }
  },
  methods: {
    luckdraw () {
      if (this.click) {
        return false
      } else {
        this.lottery.speed = 100
        this.roll()
        this.click = true
        return false
      }
    },
    sty () {
      let index = this.lottery.index
      let count = this.lottery.count
      index += 1
      if (index > count - 1) {
        index = 0
      }
      this.lottery.index = index
      return false
    },
    roll () {
      let _left = this
      this.lottery.times += 1
      this.sty()
      if (this.lottery.times > this.lottery.cycle + 10 && this.lottery.prize === this.lottery.index) {
        clearTimeout(this.lottery.timer)
        this.lottery.prize = -1
        this.lottery.times = 0
        this.lottery.speed = 20
        setTimeout(() => {
          this.lottery.index = -1
          this.click = false
        }, 3000)
      } else {
        if (this.lottery.times < this.lottery.cycle) {
          this.lottery.speed -= 10
        } else if (this.lottery.times === this.lottery.cycle) {
          let index = Math.random() * (this.lottery.count) | 0
          this.lottery.prize = index
        } else {
          if (this.lottery.times > this.lottery.cycle + 10 && ((this.lottery.prize === 0 && this.lottery.index === 11) || this.lottery.prize === this.lottery.index + 1)) {
            this.lottery.speed += 110
          } else {
            this.lottery.speed += 20
          }
        }
        if (this.lottery.speed < 40) {
          this.lottery.speed = 40
        }
        this.lottery.timer = setTimeout(_left.roll, _left.lottery.speed)
      }
      return false
    }
  }
}
</script>

<style lang="less" scoped>
#lottery {
  width: 574px;
  height: 584px;
  margin: 20px auto 0;
  background: url('/static/images/bg.jpg') no-repeat;
  padding: 50px 55px;
  ul{
    width: 568px;
    height: 568px;
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    li {
      position: absolute;
      display: block;
      width: 142px;
      height: 142px;
      text-align: center;
      font-size: 24px;
      color: #333;
      list-style: none;
      &.btn{
        width: 284px;
        height: 284px;
        left: 142px;
        top: 142px;
      }
      &.active {
        background-color: #ea0000;
      }
    }
    .lottery-unit-0 {
      left: 0;
      top: 0;
    }
    .lottery-unit-1 {
      left: 142px;
      top: 0;
    }
    .lottery-unit-2 {
      left: 284px;
      top: 0;
    }
    .lottery-unit-3 {
      left: 426px;
      top: 0;
    }
    .lottery-unit-4 {
      left: 426px;
      top: 142px;
    }
    .lottery-unit-5 {
      left: 426px;
      top: 284px;
    }
    .lottery-unit-6 {
      left: 426px;
      top: 426px;
    }
    .lottery-unit-7 {
      left: 284px;
      top: 426px;
    }
     .lottery-unit-8 {
      left: 142px;
      top: 426px;
    }
     .lottery-unit-9 {
      left: 0;
      top: 426px;
    }
     .lottery-unit-10 {
      left: 0;
      top: 284px;
    }
     .lottery-unit-11 {
      left: 0;
      top: 142px;
    }
  }
}
</style>
